<!doctype html>
<html ondragstart="return false">
 <head>
     <meta charset="UTF-8">
     <meta name="Keywords" content="关键字">
     <meta name="Description" content="描述">
     <title>灯笼</title>
	 <style>
		body{
		    position:absolute;
		    width:100%;
			height:100%;
			background-color:#000;
			perspective:800px;
		}
		#box{
			position:fixed;
			top:0;
			left:0;
			right:0;
			bottom:0;
			margin:auto;
			width:300px;
			height:700px;
			transform-style:preserve-3d;
			animation:revolve 8s linear infinite;
		}
		.middle{
			position:absolute;
			z-index:2;
			width:100%;
			height:100%;
		}
		.item{
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-image:radial-gradient(circle at center,#ffff99 0%,#ffff99 70%,#ffff00 100%);
			border:10px solid rgba(255,0,0,0.7);
			overflow:hidden;
		}
		.item-inner{
			position:fixed;
			top:0;
			left:0;
			right:0;
			bottom:0;
			margin:auto;
			width:70%;
			height:88%;
			border:10px solid rgba(255,0,0,0.7);
		}
		.it1{
			transform:translateZ(276px);
		}
		.it2{
		    transform:rotateY(60deg) translateZ(276px);
		}
		.it3{
		    transform:rotateY(120deg) translateZ(276px);
		}
		.it4{
		    transform:rotateY(180deg) translateZ(276px);
		}
		.it5{
		    transform:rotateY(240deg) translateZ(276px);
		}
		.it6{
		    transform:rotateY(300deg) translateZ(276px);
		}
		.item-circle{
			position:absolute;
			width:150px;
			height:150px;
			border-radius:50%;
			border:8px solid rgba(255,0,0,0.7);
		}
		.item-c1{
			left:-92px;
			top:-75px;
		}
		.item-c2{
			right:-92px;
			top:-75px;
		}
		.item-c3{
			bottom:-75px;
			left:-92px;
		}
		.item-c4{
			bottom:-75px;
			right:-92px;
		}
		.bottom{
			position:absolute;
			z-index:1;
			top:710px;
			width:100%;
			height:10%;
		}
		.bottom-item{
			position:absolute;
			width:100%;
			height:100%;
			background-image:linear-gradient(180deg,#ffff00 0%,#ff9900 100%);
			border:10px solid rgba(255,0,0,0.7);
			transform-style:preserve-3d;
			
		}
		.bottom-item-it1{
			transform:translateZ(276px);
		}
		.bottom-item-it2{
			transform:rotateY(60deg) translateZ(276px);
		}
		.bottom-item-it3{
			transform:rotateY(120deg) translateZ(276px);
		}
		.bottom-item-it4{
			transform:rotateY(180deg) translateZ(276px);
		}
		.bottom-item-it5{
			transform:rotateY(240deg) translateZ(276px);
		}
		.bottom-item-it6{
			transform:rotateY(300deg) translateZ(276px);
		}
		.bottom-item-center{
			position:absolute;
			top:40px;
			left:0;
			right:0;
			bottom:0;
			margin:auto;
			width:70%;
			height:31%;
			border:10px solid rgba(255,0,0,0.7);
			border-bottom:0;
		}
		.bottom-square-top{
			position:absolute;
			top:0;
			left:0;
			transform-origin:left;
			width:70px;
			height:70px;
			border:10px solid red;
			transform:translateX(-10px) translateY(-10px) rotateY(-120deg);
		}
		.bottom-square-bottom{
			position:absolute;
			top:0;
			left:0;
			transform-origin:left;
			width:40px;
			height:70px;
			border:10px solid red;
			transform:translateX(-10px) translateY(20px) rotateY(-120deg);
		}
		.bottom-square-ceil1{
			position:absolute;
			top:0;
			left:0;
			transform-origin:left;
			width:70px;
			height:100%;
			border:10px solid red;
			transform:translateX(-10px) translateY(-720px) rotateY(-120deg);
		}
		.bottom-square-ceil2{
			position:absolute;
			top:0;
			left:0;
			transform-origin:left;
			width:40px;
			height:100%;
			border:10px solid red;
			transform:translateX(-10px) translateY(-690px) rotateY(-120deg);
		}
		.top{
			position:absolute;
			z-index:3;
			top:-137px;
			left:-50px;
			width:400px;
			height:100%;
			transform-style:preserve-3d;
		}
		.top-item{
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:120px;
			background-image:linear-gradient(0deg,#ffff66 0%,#ffcc00 100%);
			border:10px solid rgba(255,0,0,0.7);
			transform-style:preserve-3d;
		}
		.top-it1{
			transform:translateZ(360px);
		}
		.top-it2{
			transform:rotateY(60deg) translateZ(360px);
		}
		.top-it3{
			transform:rotateY(120deg) translateZ(360px);
		}
		.top-it4{
			transform:rotateY(180deg) translateZ(360px);
		}
		.top-it5{
			transform:rotateY(240deg) translateZ(360px);
		}
		.top-it6{
			transform:rotateY(300deg) translateZ(360px);
		}
		.top-center{
			position:fixed;
			left:0;
			top:0;
			right:0;
			bottom:0;
			margin:auto;
			width:88%;
			height:60%;
			border:8px solid rgba(255,0,0,0.7);
		}
		.top-item-circle{
			position:absolute;
			width:140px;
			height:140px;
			border-radius:50%;
			border:8px solid rgba(255,0,0,0.7);
		}
		.top-item-c1{
			left:-82px;
			top:-80px;
		}
		.top-item-c2{
			right:-82px;
			top:-80px;
		}
		.top-item-c3{
			bottom:-80px;
			left:-82px;
		}
		.top-item-c4{
			bottom:-80px;
			right:-82px;
		}
		.top-circle{
			position:absolute;
			width:100%;
			height:100%;
			overflow:hidden;
		}
		.top-down{
			position:absolute;
			transform-origin:left;
			width:120px;
			height:120px;
			border:8px solid red;
			border-left:0;
			border-bottom:0;
			transform:translateX(-10px) translateY(-10px) rotateY(-120deg);
			transform-style:preserve-3d;
		}
		.downs{
			position:absolute;
			right:-20px;
			top:100%;
			width:30px;
			height:200px;
			transform-style:preserve-3d;
		}
		.dw{
			position:absolute;
			width:100%;
			height:100%;
			background-color:red;
		}
		.dw1{
			transform:rotateY(0deg);
		}
		.dw2{
			transform:rotateY(120deg);
		}
		.dw3{
			transform:rotateY(240deg);
		}
		.line{
			position:fixed;
			top:0;
			left:0;
			right:0;
			bottom:0;
			margin:auto;
			width:10px;
			height:1800px;
			transform:translateY(100px);
			transform-style:preserve-3d;
		}
		.ln{
			position:absolute;
			width:100%;
			height:100%;
			background-color:red;
		}
		.l1{
			transform:rotateY(0deg);
		}
		.l2{
			transform:rotateY(120deg);
		}
		.l3{
			transform:rotateY(240deg);
		}
		.chinese-square{
			position:absolute;
			bottom:30px;
			left:-194px;
			width:400px;
			height:300px;
		}
		.s{
			position:absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			margin:auto;
			width:20px;
			height:200px;
			border:5px solid red;
			border-radius:13px;
		}
		.s1{
			transform:rotateZ(45deg) translateX(23px);
		}
		.s2{
			transform:rotateZ(45deg) translateX(-23px);
		}
		.s3{
			transform:rotateZ(45deg) translateX(66px);
		}
		.s4{
			transform:rotateZ(45deg) translateX(-66px);
		}
		.s5{
			transform:rotateZ(-45deg) translateX(23px);
		}
		.s6{
			transform:rotateZ(-45deg) translateX(-23px);
		}
		.s7{
			transform:rotateZ(-45deg) translateX(66px);
		}
		.s8{
			transform:rotateZ(-45deg) translateX(-66px);
		}
		.changeX{
			right:-9px;
		}
		.scb{
			position:absolute;
			top:95px;
			width:90px;
			height:90px;
			border:10px solid red;
			border-radius:50%;
		}
		.scs{
			position:absolute;
			top:121px;
			width:40px;
			height:40px;
			border:10px solid red;
			border-radius:50%;
		}
		.slb{
			left:275px;
		}
		.srb{
		   left:12px;
		}
		.sls{
		   left:300px;
		}
		.srs{
		   left:39px;
		}
		@keyframes revolve{
			0%{
				transform:translateY(150px) translateZ(-1000px) rotateY(0deg);
			}
			50%{
				transform:translateY(150px) translateZ(-1000px) rotateY(180deg);
			}
			100%{
				transform:translateY(150px) translateZ(-1000px) rotateY(360deg);
			}
		}
	 </style>
 </head>
 <body>
	<div id = 'box'>
		<div class = 'top'>
			<div class = 'top-item top-it1'>
				<div class = 'top-center'></div>
				<div class = 'top-circle'>
					<div class = 'top-item-circle top-item-c1'></div>
					<div class = 'top-item-circle top-item-c2'></div>
					<div class = 'top-item-circle top-item-c3'></div>
					<div class = 'top-item-circle top-item-c4'></div>
				</div>
				<div class = 'bottom-square-top'></div>
				<div class = 'bottom-square-bottom'></div>
				<div class = 'top-down'>
					<div class = 'downs'>
						<div class = 'dw dw1'></div>
						<div class = 'dw dw2'></div>
						<div class = 'dw dw3'></div>
					</div>
				</div>
				
			</div>
			<div class = 'top-item top-it2'>
				<div class = 'top-center'></div>
				<div class = 'top-circle'>
					<div class = 'top-item-circle top-item-c1'></div>
					<div class = 'top-item-circle top-item-c2'></div>
					<div class = 'top-item-circle top-item-c3'></div>
					<div class = 'top-item-circle top-item-c4'></div>
				</div>
				<div class = 'bottom-square-top'></div>
				<div class = 'bottom-square-bottom'></div>
				<div class = 'top-down'>
					<div class = 'downs'>
						<div class = 'dw dw1'></div>
						<div class = 'dw dw2'></div>
						<div class = 'dw dw3'></div>
					</div>
				</div>
			</div>
			<div class = 'top-item top-it3'>
				<div class = 'top-center'></div>
				<div class = 'top-circle'>
					<div class = 'top-item-circle top-item-c1'></div>
					<div class = 'top-item-circle top-item-c2'></div>
					<div class = 'top-item-circle top-item-c3'></div>
					<div class = 'top-item-circle top-item-c4'></div>
				</div>
				<div class = 'bottom-square-top'></div>
				<div class = 'bottom-square-bottom'></div>
				<div class = 'top-down'>
					<div class = 'downs'>
						<div class = 'dw dw1'></div>
						<div class = 'dw dw2'></div>
						<div class = 'dw dw3'></div>
					</div>
				</div>
			</div>
			<div class = 'top-item top-it4'>
				<div class = 'top-center'></div>
				<div class = 'top-circle'>
					<div class = 'top-item-circle top-item-c1'></div>
					<div class = 'top-item-circle top-item-c2'></div>
					<div class = 'top-item-circle top-item-c3'></div>
					<div class = 'top-item-circle top-item-c4'></div>
				</div>
				<div class = 'bottom-square-top'></div>
				<div class = 'bottom-square-bottom'></div>
				<div class = 'top-down'>
					<div class = 'downs'>
						<div class = 'dw dw1'></div>
						<div class = 'dw dw2'></div>
						<div class = 'dw dw3'></div>
					</div>
				</div>
			</div>
			<div class = 'top-item top-it5'>
				<div class = 'top-center'></div>
				<div class = 'top-circle'>
					<div class = 'top-item-circle top-item-c1'></div>
					<div class = 'top-item-circle top-item-c2'></div>
					<div class = 'top-item-circle top-item-c3'></div>
					<div class = 'top-item-circle top-item-c4'></div>
				</div>
				<div class = 'bottom-square-top'></div>
				<div class = 'bottom-square-bottom'></div>
				<<div class = 'top-down'>
					<div class = 'downs'>
						<div class = 'dw dw1'></div>
						<div class = 'dw dw2'></div>
						<div class = 'dw dw3'></div>
					</div>
				</div>
			</div>
			<div class = 'top-item top-it6'>
				<div class = 'top-center'></div>
				<div class = 'top-circle'>
					<div class = 'top-item-circle top-item-c1'></div>
					<div class = 'top-item-circle top-item-c2'></div>
					<div class = 'top-item-circle top-item-c3'></div>
					<div class = 'top-item-circle top-item-c4'></div>
				</div>
				<div class = 'bottom-square-top'></div>
				<div class = 'bottom-square-bottom'></div>
				<div class = 'top-down'>
					<div class = 'downs'>
						<div class = 'dw dw1'></div>
						<div class = 'dw dw2'></div>
						<div class = 'dw dw3'></div>
					</div>
				</div>
			</div>
		</div>
		<div class = 'middle'>
			<div class = 'item it1'>
				<div class = 'item-inner'></div>
				<div class = 'item-circle item-c1'></div>
				<div class = 'item-circle item-c2'></div>
				<div class = 'item-circle item-c3'></div>
				<div class = 'item-circle item-c4'></div>
			</div>
			<div class = 'item it2'>
				<div class = 'item-inner'></div>
				<div class = 'item-circle item-c1'></div>
				<div class = 'item-circle item-c2'></div>
				<div class = 'item-circle item-c3'></div>
				<div class = 'item-circle item-c4'></div>
			</div>
			<div class = 'item it3'>
				<div class = 'item-inner'></div>
				<div class = 'item-circle item-c1'></div>
				<div class = 'item-circle item-c2'></div>
				<div class = 'item-circle item-c3'></div>
				<div class = 'item-circle item-c4'></div>
			</div>
			<div class = 'item it4'>
				<div class = 'item-inner'></div>
				<div class = 'item-circle item-c1'></div>
				<div class = 'item-circle item-c2'></div>
				<div class = 'item-circle item-c3'></div>
				<div class = 'item-circle item-c4'></div>
			</div>
			<div class = 'item it5'>
				<div class = 'item-inner'></div>
				<div class = 'item-circle item-c1'></div>
				<div class = 'item-circle item-c2'></div>
				<div class = 'item-circle item-c3'></div>
				<div class = 'item-circle item-c4'></div>	
			</div>
			<div class = 'item it6'>
				<div class = 'item-inner'></div>
				<div class = 'item-circle item-c1'></div>
				<div class = 'item-circle item-c2'></div>
				<div class = 'item-circle item-c3'></div>
				<div class = 'item-circle item-c4'></div>
			</div>
		</div>
		<div class = 'bottom'>
			<div class = 'bottom-item bottom-item-it1'>
				<div class = 'bottom-item-center'></div>
				<div class = 'bottom-square-top'></div>
				<div class = 'bottom-square-bottom'></div>
				<div class = 'bottom-square-ceil1'></div>
				<div class = 'bottom-square-ceil2'></div>
			</div>
			<div class = 'bottom-item bottom-item-it2'>
				<div class = 'bottom-item-center'></div>
				<div class = 'bottom-square-top'></div>
				<div class = 'bottom-square-bottom'></div>
				<div class = 'bottom-square-ceil1'></div>
				<div class = 'bottom-square-ceil2'></div>
			</div>
			<div class = 'bottom-item bottom-item-it3'>
				<div class = 'bottom-item-center'></div>
				<div class = 'bottom-square-top'></div>
				<div class = 'bottom-square-bottom'></div>
				<div class = 'bottom-square-ceil1'></div>
				<div class = 'bottom-square-ceil2'></div>
			</div>
			<div class = 'bottom-item bottom-item-it4'>
				<div class = 'bottom-item-center'></div>
				<div class = 'bottom-square-top'></div>
				<div class = 'bottom-square-bottom'></div>
				<div class = 'bottom-square-ceil1'></div>
				<div class = 'bottom-square-ceil2'></div>
			</div>
			<div class = 'bottom-item bottom-item-it5'>
				<div class = 'bottom-item-center'></div>
				<div class = 'bottom-square-top'></div>
				<div class = 'bottom-square-bottom'></div>
				<div class = 'bottom-square-ceil1'></div>
				<div class = 'bottom-square-ceil2'></div>
			</div>
			<div class = 'bottom-item bottom-item-it6'>
				<div class = 'bottom-item-center'></div>
				<div class = 'bottom-square-top'></div>
				<div class = 'bottom-square-bottom'></div>
				<div class = 'bottom-square-ceil1'></div>
				<div class = 'bottom-square-ceil2'></div>
			</div>
		</div>
		<div class = 'line'>
			<div class = 'ln l1'></div>
			<div class = 'ln l2'></div>
			<div class = 'ln l3'></div>
			<div class = 'chinese-square'>
				<div class = 's s1'></div>
				<div class = 's s2'></div>
				<div class = 's s3'></div>
				<div class = 's s4'></div>
				<div class = 's s5'></div>
				<div class = 's s6'></div>
				<div class = 's s7'></div>
				<div class = 's s8'></div>
				<div class = 'scb slb'></div>
				<div class = 'scb srb'></div>
				<div class = 'scs sls'></div>
				<div class = 'scs srs'></div>
			</div>
			<div class = 'downs changeX'>
				<div class = 'dw dw1'></div>
				<div class = 'dw dw2'></div>
				<div class = 'dw dw3'></div>
			</div>
		</div>
	</div>
 </body>
</html>